<template>
    <router-link
    tag="list"
    target="_blank"
    to="../../list"><a-button style="margin-bottom: 20px" type="primary"> 文章列表 </a-button></router-link>
    <router-link
            tag="index"
            target="_blank"
            to="../../edit"><a-button style="margin-bottom: 20px;margin-left:10px" type="primary"> 添加 </a-button></router-link>
  <a-table :columns="columns" :data-source="dataSource" @change="onChange">


    <template #tag="{ text: tag }">
      <span>
        <a-tag
                v-for="item in tag"
                :key="item"
                :color="item === 'loser' ? 'volcano' : item.length > 5 ? 'geekblue' : 'green'"
        >
          {{ item.label }}
        </a-tag>
      </span>
    </template>
    <template #action="{ record }">
      <span>
        <router-link
                tag="detail"
                target="_blank"
                :to="{ path: '../../detail', query: {id: record.id} }">
            <a>查看</a>
        </router-link>
        <a-divider type="vertical" />
       <a-popconfirm
                     v-if="dataSource.length"
                     title="Sure to delete?"
                     @confirm="onDelete(record.id)"
             >
                <a>Delete</a>
        </a-popconfirm>

        <a-divider type="vertical" />

          <a @click="edit(record.id, record.uid)">编辑</a>

          <a-divider type="vertical" />
        <a class="ant-dropdown-link">
          More actions
          <down-outlined />
        </a>
      </span>
    </template>
  </a-table>
</template>
<script>
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { defineComponent, onMounted, reactive, ref } from 'vue';
  import { getArticleAll, delArticle } from "@/api/article/index"
  import { editSelf } from "@/api/user/index"
  import { useRouter } from 'vue-router';
  import { getCookie } from "@/util/getCookieByName"
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '分类',
      key: 'tag',
      dataIndex: 'tag',
      slots: {
        customRender: 'tag',
      },

      filters: [
        {
          text: '前端',
          value: '1',
        },
        {
          text: '后端',
          value: '2',
        },
        {
          text: '其他',
          value: '3',
        },
      ],
      width: '20%',
      onFilter: (value, record) => {

        let filtersArr = [];
        if(record.tag) record.tag.filter(item=>{

          if(item.value==value) filtersArr.push(item.value);

          return filtersArr
        });
        else if(value==3) return true;

        return filtersArr.indexOf(value) === 0


      },

    },
    {
      title: '操作',
      key: 'action',
      slots: {
        customRender: 'action',
      },
    },
  ];
  const dataSource = ref([]);
  export default defineComponent({
    setup() {
        const router = useRouter();

      /**
       * 请求数据列表
       * @returns {Promise<void>}
       */
      const getArticleList = async ()=>{
        console.log("data:",dataSource);
             await getArticleAll().then(res=>{
              let data = res.list;
              data = data.filter(item=>{
                item.tag = JSON.parse(item.tag);
                return item
              });

              dataSource.value = data;
              console.log("data:",dataSource);
            })
      };


      /**
       * 删除
       * @param key
       */
      const onDelete = key => {
          console.log(key);
          let uuid = getCookie("ps");
          // if(!key || !uuid) return message.error("没有权限");

          delArticle(JSON.stringify({id: key})).then(data=>{
              if(data.code===200){
                  console.log(data);
                  message.success(data.msg);
                  dataSource.value = dataSource.value.filter(item => item.id !== key);
              }else{
                  message.error(data.msg);
              }
          });


      };

      /**
       * 编辑  /修改
       * */
      const edit = (id, uid)=>{
          let uuid = getCookie("ps");
          console.log(uuid)
          if(!id || !uuid) return message.error("没有权限");
          editSelf({uid, uuid}).then(res=>{
            if(res){
                let newpage = router.resolve({
                    path: '../../edit',
                    query:{
                        aid: id
                    }
                });
                window.open(newpage.href, '_blank');
            }else{
                message.warning("不能修改别人的文章");
            }
          })
      };


    /**
     * 改变表格
     */
      const onChange = (pagination, filters, sorter) => {
        console.log('params', filters);
      };

      onMounted(getArticleList);

      return {
        dataSource,
        columns,
        getArticleList,
        onChange,
          router,
          onDelete,
          edit
          // routeToView,
          // showList
      };
    },

    components: {
      SmileOutlined,
      DownOutlined,
    },
  });
</script>
